<template>
  <div class="mesProcessExceptionDetails">
    <ele-page
      :key="time"
      v-loading="loading"
      :formConfig="searchConfig"
      ref="eleTable"
      :operateList="operateList"
      @handleOperateEvent="handleOperateEvent"
      :column="column"
      :apiImmediate="apiImmediate"
      :initForm="initForm"
      :transFormdata="transFormdata"
      :getList="getList"
      uniqueId="mesScanRecordDefectiveTable"
    >
      <div class="card">
        <el-row :gutter="20">
          <el-col :span="8" v-for="(item, index) in cardList" :key="index">
            <div class="grid-content bg-purple">
              <el-card class="box-card" shadow="hover" :style="{ borderTop: item.color }">
                <div class="card-item">
                  <div class="value">{{ item.value }} {{ item.unit }}</div>
                  <div class="label">
                    {{ item.label }}
                  </div>
                </div>
              </el-card>
            </div>
          </el-col>
        </el-row>
      </div>
    </ele-page>
  </div>
</template>

<script>
import { operateList, searchConfig } from './config'
import { getList } from '@/api/report/mesProcessExceptionDetails'
import uploadNoAuto from '@/components/upload-no-auto'
import { uniqueKey, popover } from '@/utils/judge.js'
import { getDict } from '@/api/common'
export default {
  name: 'mesProcessExceptionDetails11',
  components: {
    uploadNoAuto
  },
  mixins: [searchConfig],
  data() {
    const _this = this
    return {
      time: 1,
      title: null,
      visible: false,
      initForm: {},
      isLoading: false,
      loading: false,
      statusList: [],
      apiImmediate: true,
      formDataDialog: {},
      searchConfig,
      operateList,
      cardList: [
        {
          color: '5px solid #64b5ea',
          label: $i18n.t('mesProcessExceptionDetails.abnormalRate'), //"异常关闭率",
          value: 0,
          unit: '%'
        },
        {
          color: '5px solid #00bfa5',
          label: $i18n.t('mesProcessExceptionDetails.anomaliesTotal'), // "异常总数量",
          value: 0,
          unit: ''
        },
        {
          color: '5px solid #f4bd60',
          label: $i18n.t('mesProcessExceptionDetails.unclosedQuantity'), //"未关闭数量",
          value: 0,
          unit: ''
        }
      ],
      getList,
      isLoadingImport: false, // 导入数据loading
      importData: {}, //导入数据
      importVisible: false,
      // 列表页字段的绑定配置
      column: [
        {
          type: 'selection'
        },
        {
          type: 'index',
          label: $i18n.t('common.order'),
          width: 60,
          fixed: 'left'
        },
        // {
        //   prop: "barcode",
        //   label: "条码",
        //   fixed: "left",
        //   minWidth: 150,
        //   showOverflowTooltip: true,
        // },
        {
          prop: 'productProcessCode',
          label: $i18n.t('common.processCode'), //工序编码
          minWidth: 120,
          fixed: 'left',
          showOverflowTooltip: true
        },
        {
          prop: 'productProcessName',
          label: $i18n.t('common.processName'), //工序名称
          minWidth: 120,
          fixed: 'left',
          showOverflowTooltip: true
        },
        {
          prop: 'planCode',
          label: $i18n.t('mesProcessExceptionDetails.planCode'), //订单编码
          minWidth: 180,
          showOverflowTooltip: true,
          render: (h, { row }) => {
            return popover(row.planCode, h, '', () => this.goPlanworkDetails(row))
          }
        },
        {
          prop: 'orderCode',
          label: $i18n.t('mesProcessExceptionDetails.orderCode'), //工单编码
          minWidth: 180,
          showOverflowTooltip: true,
          render: (h, { row }) => {
            return popover(row.orderCode, h, '', () => this.goworkDetails(row))
          }
        },
        {
          prop: 'prodCode',
          label: $i18n.t('mesProcessExceptionDetails.prodCode'), //产品编码
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'prodName',
          label: $i18n.t('mesProcessExceptionDetails.prodName'), //产品名称
          minWidth: 140,
          showOverflowTooltip: true
        },
        {
          prop: 'faultName',
          label: $i18n.t('mesProcessExceptionDetails.faultName'), // "不良名称", //不良分类名称
          minWidth: 150,
          showOverflowTooltip: true
        },
        {
          prop: 'quantity',
          label: $i18n.t('mesProcessExceptionDetails.quantity'), //数量
          // minWidth: 130,
          showOverflowTooltip: true
        },
        {
          prop: 'workshopName',
          label: $i18n.t('mesProcessExceptionDetails.workshop'),
          minWidth: 130,
          showOverflowTooltip: true
        },
        {
          prop: 'lineName', //线体名称
          label: $i18n.t('common.lineName'),
          minWidth: 130,
          showOverflowTooltip: true
        },
        {
          prop: 'equipmentName',
          label: $i18n.t('mesProcessExceptionDetails.equipmentName'), //设备名称
          minWidth: 140,
          showOverflowTooltip: true
        },

        {
          prop: 'createByName',
          label: $i18n.t('common.createByName'), //创建人
          minWidth: 130,
          showOverflowTooltip: true
        },
        {
          prop: 'createTime',
          label: $i18n.t('common.createTime'), //创建时间
          width: 160
        },
        {
          prop: 'updateByName',
          label: $i18n.t('common.updateByName'),
          minWidth: 130,
          showOverflowTooltip: true
        },
        {
          prop: 'updateTime',
          label: $i18n.t('common.updateTime'),
          width: 160
        },
        {
          prop: 'defectiveStatus',
          label: $i18n.t('mesProcessExceptionDetails.state'),
          width: 100,
          fixed: 'right',
          render: (h, { row }) => {
            let data = _this.statusList.find((ite) => {
              return row.defectiveStatus == ite.value
            })
            let tags = ['danger', 'warning', 'success', 'info', 'info', 'info', 'info', 'info', 'info']
            return <el-tag type={tags[data.value]}>{data.description}</el-tag>
          }
        }
      ]
    }
  },
  watch: {
    $route: {
      handler(val, old) {
        this.initForm = JSON.parse(this.$route.query.str)
        this.refresh(false)
      },
      deep: true
    }
  },
  computed: {},
  methods: {
    // 跳转工单详情
    goworkDetails(row) {
      // saleCode
      this.$router.push({
        path: '/order/mesProdOrderPlan/workSee',
        query: {
          id: row.orderCode
        }
      })
    },
    goPlanworkDetails(row) {
      // saleCode
      this.$router.push({
        path: '/order/mesProdOrderPlan/see',
        query: {
          id: row.planCode
        }
      })
    },
    async transFormdata(data) {
      let { page, mesScanRecordDefectiveReportViewDto } = data.data.result
      {
        /* 上方卡片统计 */
      }
      this.cardList[0].value = mesScanRecordDefectiveReportViewDto.closeRate
      this.cardList[1].value = mesScanRecordDefectiveReportViewDto.allNum
      this.cardList[2].value = mesScanRecordDefectiveReportViewDto.noCloseNum
      return { records: page.records, total: page.total }
    },
    async getStatusList() {
      const list = await getDict('defective_status')
      this.statusList = list.data.result
    },
    //表格顶部按钮操作事件
    handleOperateEvent(data) {
      this.title = data.name
      const fnc = {}
      {
        /* fnc[data.handleName](); */
      }
    },
    //刷新表格数据
    refresh(isReset = true) {
      this.$refs.eleTable.refresh(isReset)
    }
  },
  created() {
    if (this.$route.query.str) {
      this.initForm = JSON.parse(this.$route.query.str)
    }

    this.getStatusList()
  },
  activated() {
    this.getStatusList()
  }
}
</script>
<style lang="scss" scoped>
.mesProcessExceptionDetails {
  .card {
    padding-bottom: 10px;
    .card-item {
      text-align: center;
      .label {
        color: #5a6f82;
        font-size: 14px;
      }
      .value {
        color: #000;
        font-size: 16px;
        font-weight: 600;
        line-height: 26px;
      }
    }
  }
}
</style>
